<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹屏游戏</title>
    <link rel="stylesheet" href="themes/icon.css">
    <style>
        *{
            padding: 0;
            margin:0;
            font-size: 12px;
        }
        ul li{list-style-type: none}
        .wrap{
            height:100%;
            width:294px;
            border-radius: 8px;
            margin:50px auto;
            position: relative;
            max-height:516px;
        }
        .header{
            height:66px;
            max-height:80px;
            background: url(img/s-bg.png) no-repeat;
        }
        .header img{
            padding: 16px 96px;
        }
        .close{
            width:10px;
            height:10px;
            right:5px;
            top:5px;
            position: absolute;
        }
        .main{
            background: linear-gradient(#8263da,#be7cdd);
            border-radius: 0 0 7px 7px;
            padding: 0 10px 30px;
        }
        .content{
            max-height: 450px;
            width:100%;
            background: #fff;
            border-radius: 7px;
        }
        .c_tab{
            padding:10px;
            height:100%;
            margin:0 auto;
            padding:0;
        }
        .c_tab tr{
            height:50px;
            padding-left: 10px;
        }
        .c_tab tr td:last-child{
            padding-left: 10px;
        }
        .p_rule{
            height:0;
            text-align: center;
            padding-top: 8px;
        }
        .p_rule a{
            margin:0 10px;
            color: #e3e3e3;
        }
        .s_btn{
            height:36px;
            width:160px;
            background-color: #ff738e;
            border-radius: 36px;
            display: flex;
            color: #fff;
            cursor: pointer;
            justify-content: center;
            font:bold 15px/36px arial,sans-serif;
        }
        input[type="radio"] + label::before {
            content: "\a0"; /*不换行空格*/
            display: inline-block;
            font-size: 12px;
            width: 12px;
            height: 12px;
            margin-right: 2px;
            border-radius: 50%;
            border: 1px solid #ff738e;
            text-indent: .15em;
            line-height: 1;
            cursor: pointer;
        }
        input[type="radio"]:checked + label::before {
            background-color: #ff738e;
            background-clip: content-box;
            padding: .2em;
        }
        input[type="radio"] {

            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
        /*模态框*/
        .modal{
            background-color: rgba(0,0,0,.4);
            /*opacity: .4;*/
            width:100%;
            height:100%;
            position: absolute;
            left: 0;
            top:0;
            border-radius:7px;
        }
        .m-w-pop{
            position: absolute;
            /*top: 35%;*/
            left: 25%;
            background-color: #ffb166;
            width: 151px;
            height: 50px;
            color: #fff;
            border-radius: 7px;
            text-align: center;
            line-height: 50px;
        }
        /*题目*/
        .subject{
            color: rgb(0, 0, 0);
            border:none;
            border-bottom: 1px solid rgb(192,192,192);
            outline: none;
            padding: 2px 2px;
            width:164px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="header">
        <a href="#" class="icon-close close" id="close"></a>
        <img src="img/title.png">
    </div>
    <div class="main">
        <div class="content">
            <table class="c_tab">
                <tr>
                    <td>题型：</td>
                    <td style="padding-top: 4px;">
                        <input checked id="vote" type="radio" name="rType">
                        <label for="vote" >投票</label>
                        <input type="radio" id="sel" name="rType">
                        <label for="sel" >选择</label>
                    </td>
                </tr>
                <tr style="height: 30px;">
                    <td>题目：</td>
                    <td>
                        <input class="subject" type="text">
                    </td>

                </tr>
                <tr style="height: 0;">
                    <td colspan="2" style="padding: 0;">
                        <input class="subject" type="text" style="width: 213px;">
                    </td>
                </tr>
                <tr>
                    <td>时长：</td>
                    <td width="170" style="padding-top: 4px;">
                        <input checked type="radio" id="t-1" name="rTime"><label for="t-1">30秒</label>
                        <input type="radio" id="t-2" name="rTime"><label for="t-2">60秒</label>
                        <input type="radio" id="t-3" name="rTime"><label for="t-3">3分</label>
                        <input type="radio" id="t-4" name="rTime"><label for="t-4">5分</label>
                    </td>
                </tr>
                <tr>
                    <td>选项：</td>
                    <td>
                        <ul id="selMenu">

                        </ul>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input  type="button" style="position: absolute;clip:rect(0 0 0 0);">
                        <label id="btn-sub" for="btn-sub" class="s_btn">添加选项</label>
                        <div class="modal" id="m-warning" style="display: none">
                            <div class="m-w-pop" style="top: -14%;">
                                <span>问题选择项最多4个！</span>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <p class="p_rule">
            <a href="#">玩法介绍</a><a href="#">规则手册</a>
        </p>
    </div>

</div>
<script>

    let oBtn = document.querySelector('#btn-sub');
    let oModal = document.querySelector('#m-warning');
    let oModalText = document.querySelector('#m-warning div');

    oBtn.addEventListener('click', function(){

      let oSelMenu = document.querySelectorAll('#selMenu')[0];
      let oLi = document.createElement('li');
      oLi.innerHTML = `<input type="text" style="border: none;border-bottom: 1px #ccc solid">`;
      oSelMenu.appendChild(oLi);

      let oSelMenuLi = document.querySelectorAll('#selMenu li');

      let oLenLi = oSelMenuLi.length;
      if(oLenLi > 3){
        let t = 0;

        oBtn.innerHTML = "提交审核";
        oModal.style.display = 'block';
        let mTimer = setInterval(function(){
          oModalText.style.top = t + '%';
          t > 30 ? clearInterval(mTimer) : t++;
        },10);


      }
    })
</script>
</body>
</html>